<template>
	<view class="goods">
		<van-swipe :autoplay="3000" lazy-render>
			<van-swipe-item v-for="image in images" :key="image">
				<image :src="image" />
			</van-swipe-item>
		</van-swipe>
		<!-- 优惠券单元格 -->
		<van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
		<!-- 优惠券列表 -->
		<van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
			<van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
				@change="onChange" @exchange="onExchange" />
		</van-popup>

		<van-cell @click="show = true" is-link>
			<template #title>
				<view class="cell-title">
					<view class="option">选择</view>
					<view class="title">套餐</view>
				</view>
			</template>
		</van-cell>
		<van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" />

		<!-- 粘性布局 -->
		<van-sticky>

		</van-sticky>
		<van-tabs v-model:active="active">
			<van-tab title="规格"></van-tab>
			<van-tab title="评价"></van-tab>
			<van-tab title="详情"></van-tab>
			<van-tab title="推荐"></van-tab>
		</van-tabs>
		<van-action-bar>
			<van-action-bar-icon icon="chat-o" text="客服" dot />
			<van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
			<van-action-bar-button type="warning" text="加入购物车" />
			<van-action-bar-button type="danger" text="立即购买" />
		</van-action-bar>
	</view>

</template>

<script>
	import {
		ref
	} from 'vue';
	export default {
		setup() {
			const active = ref(0);
			const show = ref(false);
			const showPopup = () => {
				show.value = true;
			};
			const images = [
				'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
				'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
			];
			const coupon = {
				available: 1,
				condition: '无门槛\n最多优惠12元',
				reason: '',
				value: 150,
				name: '优惠券名称',
				startAt: 1489104000,
				endAt: 1514592000,
				valueDesc: '1.5',
				unitDesc: '元',
			};

			const coupons = ref([coupon]);
			const showList = ref(false);
			const chosenCoupon = ref(-1);

			const onChange = (index) => {
				showList.value = false;
				chosenCoupon.value = index;
			};
			const onExchange = (code) => {
				coupons.value.push(coupon);
			};
			return {
				active,
				show,
				showPopup,
				images,
				coupons,
				showList,
				onChange,
				onExchange,
				chosenCoupon,
				disabledCoupons: [coupon],
			};
		},
	};
</script>

<style>
	.cell-title {
		display: flex;
	}

	.cell-title .option {
		width: 80rpx;
		color: #666;
	}
</style>
